<template>
    <div class="bake">
        <!-- <h3>九列表的烘焙8</h3> -->
        <div class="product"> 
          <div class="shuju" v-for="(item,index) in productBack " :key=index >
           <div class="content"  >
             <div class="top">
                <h1>{{item.note.title}}</h1>
             </div>
             <div class="thetwo"> 
             <div class="message">
                <div class="imgs"> <van-icon name="eye-o" /> </div>
                <div class="people">{{item.note.image_h}} </div>
             </div>
             <div class="details"> 
                <div class="star"> <van-icon name="star-o" /> </div>
                <div class="hunmen"> {{item.note.image_w}} </div>
             </div>
              </div>
             <div class="foot">
                <img :src="item.note.image_u" alt="">
             </div>
             
           </div>    
        </div> 
       </div>
     
    </div>
</template>

<script>
    export default {
        name:"Bake",

            data(){
        return{
            productBack:[],

            tabIndex:0,
            //订单数据
            orderData:[]
        };
    },

    created(){
        this.GetRecommend();
    },
    methods:{
        GetRecommend(){
            this.axios({
            method: "get",
            url: "https://apis.netstart.cn/douguo/note/topicdetail/1073/0/20",
            //get请求参数写在params中
            params: {
            appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
            offset: "60",
            limit: "90",
            },
        })
            .then((result) => {
            // console.log("result==>", result);
            if (result) {
                
            }
            this.productBack = result.data.result.list;
            //   this.productDataaend = result.data.data;
            // console.log(" this.productBack==>", this.productBack);
            })
            .catch((err) => {
            console.log("err==>", err); //用来捕获错误

            });
        },
    },
    }
</script>

<style lang="less" scoped>
       .product{
        .shuju{
            padding:10px;
            .content{
                .top{
                    
                    h1{
                       margin-top: 10px;
                    }
                }
                .thetwo{ 
                    display: flex;
                .message{
                    font-size: small;
                    font-weight: 500;
                    display: flex;
                }
                .details{
                    margin-left: 25px;
                    display: flex;
                    font-size: small;
                    font-weight: 500;                   
                }
            }
                .foot{ 
                    padding: 10px;
                    overflow: hidden;
                    
                    img{
                        border-radius: 5px;
                        width: 100%;
                    }
                }
            }
        }

    }
</style>